<template>
  <div class="container">
    <div class="title-three">整改汇报</div>
    <div class="choise-row">
      <div class="choise-row-left">
        <span class="label">问题分类：</span>
        <el-input v-model="input1"></el-input>
        <el-row>
          <el-button type="query" @click="searchList">查询</el-button>
          <el-button type="Reset" @click="clearOption">重置</el-button>
        </el-row>
      </div>
      <el-button type="primary" icon="el-icon-download" @click="dialogVisible = true">批量下载</el-button>
    </div>
    <!-- <div class="table-box-three-main"> -->
    <div>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column
          type="index"
          min-width="50px"
          width="50"
          label="序号"
          align="center"
          height="60"
        ></el-table-column>
        <el-table-column prop="orgName" label="整改对象" min-width="80" align="center"></el-table-column>
        <el-table-column prop="category" label="问题分类" min-width="120" align="center"></el-table-column>
        <el-table-column prop="name" label="问题清单" min-width="120" align="center"></el-table-column>
        <el-table-column prop="finishedTime" label="最终提交时间" min-width="60" align="center"></el-table-column>
        <el-table-column prop="change" label="操作" min-width="80" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="GotoDetail(scope.row.id)"  v-if="_SHOWBTN('xsxc-zghb-xq')">查看</el-button>
            <el-button size="mini" type="primary" @click="GotoDown(scope.row.id)" v-if="_SHOWBTN('xsxc-zghb-xz')">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页开始 -->
    <div class="fenye-bottom">
      <Pagination :total="total" :params="params" :get="getList"></Pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 批量下载对话框 -->
    <el-dialog :visible.sync="dialogVisible" top="45vh" width="420px">
      <div class="download_tip">
        <div class="icon">!</div>
        <span>下载提示</span>
      </div>
      <div class="makesure">确定下载选中的信息吗？</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="downLoadAll">确 定</el-button>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Popup/Pagination.vue";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      paramsClass: {
        pageNum: 1,
        pageSize: 10,
        publishStatus: "",
        title: "",
      },
      total: 0,
      valueDown: "",
      inputvalue: "",
      input1: "", // 问题分类
      tableData: [],
      //复选框选择时的
      multipleSelection: [],
      dialogVisible: false,
      params: {
        category: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取分页列表
    getList() {
      this.Api.rectifyPage(this.params).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    //查询搜索框
    // 搜索数据
    searchList() {
      this.Api.rectifyPage({
        category: this.input1,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    //重置
    clearOption() {
      // 问题分类
      this.input1 = "";
      this.getList();
    },
    //复选框选择时触发
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },

    //点击跳转详情
    GotoDetail(id) {
      this.$router.push({ name: "ReportInfo", query: { id: id } });
    },
    // 全部下载
    downLoadAll() {
      let ids1 = [];
      this.multipleSelection.forEach((item) => {
        ids1.push({
          id: item.id,
        });
      });
      this.Api.downLoad({ ids: ids1 }).then((res) => {
        if (res.code === "0") {
          this.$message.success("下载成功");
          this.dialogVisible = false;
        } else {
           this.$message.error("请勾选下载项");
            this.dialogVisible=false
        }
      });
    },
    //点击下载
    GotoDown(id) {
      let ids = [];
      ids.push({ id: id });
      this.Api.downLoad({ ids: ids }).then((res) => {
        if(res.code==0){
          this.$message.success('下载成功')
        }else{
          return this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
//整改汇报
.title-three {
  background-color: #fff;
  padding: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

//问题分类
.choise-row-left {
  margin-right: 30px;
  font-size: 14px;
  color: #333333;
  width: 100%;
}

.ReformSearch {
  // 搜索
  /deep/ .el-form {
    // input的 下外边距
    .el-form-item {
      margin-bottom: 10px;
    }
    // 下拉框样式
    input {
      width: 150px;
    }
    //按钮样式
    button {
      width: 52px;
      height: 36px;
      margin-left: 12px;
      padding: 12px 0px;
    }
  }
}

.piliang {
  background-color: ＃409EFF;
}
.download_tip {
  display: flex;
  margin-bottom: 20px;
  .icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background-color: #ffbf00;
    margin-right: 20px;
  }
  span {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }
}
.makesure {
  font-size: 14px;
  color: #666;
  margin-left: 40px;
}
/deep/.el-dialog__header {
  padding: 0;
}
</style>
